<template>
   <view>
      <scroll-view class="content" scroll-y @scroll="onScroll">
         <image class="bg_img" src="/static/tab2/bg.png" mode="scaleToFill"></image>
         <view class="content_scroll">
            <view class="controls" :class="sticky" :style="{backgroundColor: bgColor}">
               <view class="placeholder"></view>
               <view class="controls_content">
                  <view class="title"  :style="{opacity: opacity}">
                     <u-avatar v-show="opacity != 0" :src="fileUrl + avatar" :size="28"></u-avatar>
                     <view v-show="opacity != 0">{{ nickname + nickname }}</view>
                  </view>
                  <view class="rigth_icon">
                     <view class="icon-edit white" @click="goItem('0')"></view>
                     <view class="icon-set white" @click="goItem('1')"></view>
                  </view>
               </view>
            </view>
            <view class="top">
               <view class="user">
                  <view class="avatar">
                     <image
                        :src="fileUrl + avatar"
                        mode="scaleToFill"
                     />
                  </view>
               </view>
               <view class="user_info">
                  <view class="user_name">{{ nickname }}</view>
                  <view class="user_ip">
                     <text>IP所在地：{{ city }}</text>
                  </view>
               </view>
               <view class="property">
                  <view class="panel">
                     <view class="value">{{ data.attention }}</view>
                     <view class="name">关注</view>
                  </view>
                  <view class="panel">
                     <view class="value">{{ data.fans }}</view>
                     <view class="name">粉丝</view>
                  </view>
                  <view class="panel">
                     <view class="value">{{ data.forum }}</view>
                     <view class="name">发帖</view>
                  </view>
                  <view class="panel">
                     <view class="value">{{ data.likes }}</view>
                     <view class="name">被赞</view>
                  </view>
               </view>
            </view>
            <u-gap height="15px" bgColor="#f5f5f5"></u-gap>
            <view class="tabs">
               <u-sticky bg-color="#ffffff" :offset-top="0">
                  <view class="tabs_header">Ta的动态</view>
               </u-sticky>
               <view v-if="dataList.length != 0" style="height: auto;background-color: #f5f5f5;">
                  <view class="item" v-for="(item, index) in dataList" :key="index">
                     <view class="album">
                        <view class="album__content">
                           <view class="album__content_text" @click="goDetail(item)">
                              <u-parse :content="item.content" :style="{ height: item.toggle || item.row < 5 ? 'auto' : '110px', overflow: 'hidden' }"></u-parse>
                              <view class="toggleBtn" v-if="item.row > 5" @click.self.stop="open(item)">{{ item.toggle ? '收起' : '展开' }}</view>
                           </view>
                           <c-album-list :urls="item.images" :multipleSize="multipleSize" :space="10"></c-album-list>
                        </view>
                        <u-gap height="5" bgColor="#f5f5f5"></u-gap>
                        <view class="album__footer">
                           <view>
                              <image src="/static/tab2/icon_views.png"></image>
                              <text>{{ item.views }}</text>
                           </view>
                           <view>
                              <image src="/static/tab2/icon_comments.png"></image>
                              <text>{{ item.comments }}</text>
                           </view>
                           <view>
                              <image src="/static/tab2/icon_likes.png"></image>
                              <text>{{ item.likes }}</text>
                           </view>
                        </view>
                     </view>
                  </view>
                  <u-loadmore :status="loadMore" :margin-top="10" :marginBottom="20" />
               </view>
               <u-empty v-else icon="/static/no_data.png" text="暂无内容" style="height: calc(100% - 44px);"></u-empty>
            </view>
         </view>
      </scroll-view>

      <c-modal :show="show" title="系统提示" content="是否举报此用户？" showCancel cancelText="取消" confirmText="举报"
      @cancel="show = false" @confirm="report()"></c-modal>

      <c-loading></c-loading>
   </view>
</template>

<script>
import {
   baseData
} from '@/api/user'
import {
   getForumList
} from '@/api/forum'
import mixin from '@/mixin'
import { mapGetters } from 'vuex'
export default {
   data() {
      return {
         uid: '',
         show: false,
         data: {},
         multipleSize: 70,
         isApp: false,
         city: '南昌市',
         sticky: '',
         bgColor: 'transparent',
         opacity: 0
      }
   },
   mixins: [mixin],
   computed: {
      ...mapGetters(['id', 'nickname', 'avatar'])
   },
   created() {
      if(this.id) {
         this.getDataList(true)
      }
      // #ifdef H5
      this.isApp = false
      uni.request({
         url: `https://restapi.amap.com/v3/ip?key=9a6012990ac5a512d7a40dd9be1e0237`,
         method: 'GET',
         success: ({ data, statusCode, header }) => {
            this.city = data.city
         }
      })
      // #endif
      // #ifndef H5
      this.isApp = true
      uni.getLocation({
         type: 'wgs84',
         geocode: true,
         isHighAccuracy: true,
         success: ({ longitude, latitude, address }) => {
            this.city = address.city
         }
      })
      // #endif
   },
   mounted() {
      const dom = uni.createSelectorQuery().select('.tabs_header')
      dom.boundingClientRect(info => {
         this.top = info.top
      }).exec()
   },
   methods: {
      onScroll(e) {
         const { scrollTop } = e.detail
         if(this.top - scrollTop < 0) {
            this.bgColor = 'rgba(255, 255, 255, 1)'
            this.sticky = 'sticky'
            this.opacity = 1
         }else if(this.top - scrollTop < 10) {
            this.bgColor = 'rgba(255, 255, 255, .8)'
            this.opacity = 0.8
         }else if(this.top - scrollTop < 30) {
            this.bgColor = 'rgba(255, 255, 255, .5)'
            this.opacity = 0.5
         }else {
            this.sticky = ''
            this.bgColor = 'transparent'
            this.opacity = 0
         }
      },
      goItem(type) {
         if(type == '0') {
            uni.navigateTo({
               url: '/pages/tab4/userInfo/index'
            })
         }else if(type == '1') {
            uni.navigateTo({
               url: '/pages/tab4/set/index'
            })
         }
      },
      getBaseData() {
         baseData(this.id).then(res => {
            if(res.code === 200) {
               this.data = res.data
            }
         })
      },
      getDataList(isRefresh) {
         const params = {}
         params.size = 20
			params.current = this.current
			params.siftStatus = '2'
			params.uid = this.id
         getForumList(params).then(res => {
            if(res.code === 200) {
					this.total = res.data.total
					if(isRefresh) {
						this.dataList = []
					}
					res.data.list.forEach(item => {
						const images = []
						let index = item.content.indexOf('</p>')
						item.row = 0
						while(index != -1) {
							index = item.content.indexOf('</p>', index + 1)
							item.row++
						}
						JSON.parse(item.images).map(img => {
							images.push(this.fileUrl + img)
						})
						item.images = images
						this.dataList.push(item)
					})
				}
         })
         this.getBaseData()
      }
   },
   updated() {
		const dom = uni.createSelectorQuery().in(this).select('.content')
		dom.boundingClientRect((info) => {
			this.multipleSize = (info.width - 60) / 3
		}).exec()
	},
}
</script>

<style lang="scss" scoped>
::v-deep .u-navbar__content {
   background-color: transparent !important;
}

::v-deep .zp-paging-container-content {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.content {
   height: calc(100vh - 60px) !important;
   background-color: transparent;
   z-index: 99;

   .bg_img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      z-index: -1;
   }

   .controls {
      position: sticky;
      top: 0;
      padding-right: 10px;
      box-sizing: border-box;

      &_content {
         display: flex;
         align-items: center;
         justify-content: center;

         .title {
            display: flex;
            align-items: center;
            width: calc(100% - 72px);
            justify-content: flex-start;
            padding-left: 15px;
            box-sizing: border-box;
            

            & > view:last-child {
               width: calc(100% - 28px);
               padding-left: 10px;
               font-weight: bold;
               font-size: 16px;
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
            }
         }
      }
   
      &.sticky {
         z-index: 999;

         [class^=icon] {
            background-color: transparent;
            color: #333333;
            font-weight: bold;
            font-size: 20px;
         }
      }

      .placeholder {
         width: 100%;
         height: var(--status-bar-height);
      }

      .rigth_icon {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         height: 44px;
         width: 72px;
      }

      .rigth_icon > view {
         margin-left: 8px;
      }

      .white {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 28px;
         height: 28px;
         background-color: rgba($color: #000000, $alpha: .2);
         border-radius: 50%;
         font-size: 20px;
      }
   }

   .top {
      margin-top: 200px;
      background-color: #ffffff;
   }

   .user {
      display: flex;
      align-items: center;
      padding: 0 15px;

      .avatar {
         width: 84px;
         height: 84px;
         transform: translateY(-24px);

         image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
         }
      }

      .attention {
         padding: 3px 10px;
         background-color: #3D444D;
         border-radius: 20px;
         margin-right: 10px;
         color: #ffffff;
         font-size: 14px;
      }

      &_info {
         padding: 0 15px;
         font-size: 22px;
         font-weight: bold;
      }

      &_ip {
         display: inline-block;
         margin-top: 10px;
         padding: 0 6px;
         border-radius: 4px;
         background-color: #cecece;
         color: #ffffff;
         font-size: 12px;
         font-weight: normal;
      }
   }

   .property {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 15px 0;
      border-radius: 8px;

      .panel {
         width: 100%;
         text-align: center;
      }

      & > * {
         color: #000000;
         font-weight: 600;
      }

      .value {
         font-size: 18px;
         line-height: 24px;
      }

      .name {
         padding-top: 5px;
         color: #999999;
         font-size: 12px;
         font-weight: normal;
      }
   }
}

.tabs {
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--status-bar-height) - 44px - 419px - 15px - 60px);
   background-color: #ffffff;
   
   &_header {
      padding: 10px 0 10px 10px;
      font-weight: bold;
      font-size: 16px;
      box-shadow: 0 1px 2px rgba($color: #000000, $alpha: .3);
   }

   & .item:first-child {
      padding-top: 0;
   }
}

</style>

// import { mapGetters } from 'vuex'
// import {
//    baseData
// } from '@/api/user'
// export default {
//    data() {
//       return {
//          data: {},
//          menus: [
//             {
//                text: '实名认证',
//                icon: '/static/tab4/icon_auth.png',
//                url: '',
//                needed: true,
//             },{
//                text: '关于我们',
//                icon: '/static/tab4/icon_about.png',
//                url: '/pages/tab4/about/index',
//                needed: false,
//             },{
//                text: '帮助反馈',
//                icon: '/static/tab4/icon_help.png',
//                url: '/pages/tab4/help/index',
//                needed: false,
//             },{
//                text: '分享好友',
//                icon: '/static/tab4/icon_share.png',
//                url: '',
//                needed: false,
//             },{
//                text: '退出登陆',
//                icon: '/static/tab4/icon_exit.png',
//                url: '',
//                needed: false,
//             }
//          ],
//          popup: false,
//          shareList: [
//             {
//                text: '微信好友',
//                src: '/static/fx/wx.png'
//             },{
//                text: '朋友圈',
//                src: '/static/fx/pyq.png'
//             },{
//                text: 'QQ好友',
//                src: '/static/fx/qq.png'
//             },{
//                text: 'QQ空间',
//                src: '/static/fx/qqkj.png'
//             },
//          ],
//          modal: false
//       }
//    },
//    computed: {
//       ...mapGetters(['avatar', 'id', 'username', 'name', 'sex', 'major', 'clazz', 'nickname']),
//       imgUrl() {
//          return this.avatar ? this.fileUrl + this.avatar : this.fileUrl + '/static/avatar/default.png'
//       },
//       names() {
//          return this.name || '未登录'
//       }
//    },
//    watch: {
//       popup(val) {
//          uni.$emit('changePop', val)
//       }
//    },
//    created() {
//       baseData(this.id).then(res => {
//          if(res.code === 200) {
//             this.data = res.data
//          } 
//       })
//    },
//    methods: {
//       goAttentionList() {

//       },
//       goFansList() {

//       },
//       goForumList() {
//          uni.navigateTo({
//             url: '/pages/tab2/list/index'
//          })
//       },
//       changeInfo() {
//          uni.navigateTo({
//             url: '/pages/tab2/person/index?my'
//          })
//       },
//       toLogin() {
//          uni.reLaunch({
//             url: '/pages/login'
//          })
//       },
//       goItem(type) {
//          switch(type) {
//             case '0':
//                uni.navigateTo({
//                   url: '/pages/tab4/userInfo/index'
//                })
//             break
//             case '1':
//                uni.navigateTo({
//                   url: '/pages/tab4/set/index'
//                })
//             break
//          }
//       },
//       goMenu(menu) {
//          if(menu.text.indexOf('退出登陆') != -1) {
//             this.modal = true
//             return
//          }
//          if(menu.needed && this.id) {
//             uni.navigateTo({
//                url: menu.url
//             })
//          }else if(!menu.needed){
//             uni.navigateTo({
//                url: menu.url
//             })
//          }else if((this.id ?? '') == '') {
//             this.$toast.show({
//                msg: '登陆后查看'
//             })
//             // uni.reLaunch({
//             //    url: '/pages/login'
//             // })
//          }
//       },
//       confirm() {
//          uni.reLaunch({
//             url: '/pages/login'
//          })
//       }
//    }
// }